<template>
    <div class="whole">
        <div class="form">
            <div class="logo-container">
                <img class="logo-image" src="@/assets/picture/logo.ico" height="50px">
                <h1 class="logo-text">Register</h1>
            </div>
            <div class="mb-2 flex items-center text-sm form-item">
                <span class="word">账户角色：</span>
                <el-radio-group v-model.lazy="userroleInput"  class="ml-4 input">
                    <el-radio value="1" size="large">普通用户</el-radio>
                    <el-radio value="2" size="large">商户</el-radio>
                </el-radio-group>
            </div>
            <div class="form-item">
                <span class="word">用户名：</span>
                <el-input :class="{illegal_input: isInputIllegal[0]}" v-model="usernameInput" class="input" placeholder="仅能出现英文字符、数字与下划线，长度为3-10个字符" />
            </div>
            <div class="form-item">
                <span class="word">手机号：</span>
                <el-input :class="{illegal_input: isInputIllegal[1]}" v-model="phonenumberInput" class="input"  placeholder="中国大陆手机号标准格式" />
            </div>
            <div class="form-item">
                <span class="word">身份证号：</span>
                <el-input  :class="{illegal_input: isInputIllegal[2]}" v-model="IDcardInput" class="input"   placeholder="中国大陆18位身份证号" />
            </div>
            <div class="mt-4 form-item">
                <span class="word">邮箱：</span>
                <div class="input">
                    <el-input
                    :class="{illegal_input: isInputIllegal[3]}"
                    v-model="emailprefixInput"
                    placeholder="雷·汤姆林森创立的标准E-mail格式"
                    >
                    <template #append>
                        <el-select
                        v-model="emailappendSelection"
                        placeholder="选择邮箱后缀"
                        size="large"
                        style="min-width: 150px;"
                        >
                        <el-option
                            v-for="item in MailAppend"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                        </el-select>
                    </template>
                    </el-input>                         
                </div>
            </div>
            <div class="form-item">
                <span class="word">密码：</span>
                <el-input
                    :class="{illegal_input:isInputIllegal[4]}"
                    v-model="passwordInput"
                    class="input"
                    type="password"
                    placeholder="6-32个字符,字母,数字或者特殊字符(-_)至少包含两种"
                    show-password
                />
            </div>
            <div class="form-item">
                <span class="word">确认密码：</span>
                <el-input
                    :class="{illegal_input:isInputIllegal[5]}"
                    v-model="passwordvalidateInput"
                    class="input"
                    type="password"
                    placeholder="请确认密码"
                />
            </div>
        </div>
        <el-button type="primary" round style="width: 200px;" @click="UserRegisterApply">注册</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref,watch } from 'vue';
import router from '@/router/index'
import axios from 'axios';
const userroleInput = ref('1')
const usernameInput = ref('')
const phonenumberInput = ref('')
const IDcardInput = ref('')
const emailprefixInput = ref('')
const emailappendSelection = ref()
const passwordInput = ref('')
const passwordvalidateInput = ref('')
const isInputIllegal:Boolean[] = Array(6).fill(true)
watch(usernameInput,(newValue)=>{
    const regex = /^[a-zA-Z0-9_]{3,10}$/;
    isInputIllegal[0]=!regex.test(newValue)
    console.log(isInputIllegal)
})
watch(phonenumberInput,(newValue)=>{
    const regex = /^\d{11}$/;
    isInputIllegal[1]=!regex.test(newValue)
})
watch(IDcardInput,(newValue)=>{
    const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
    isInputIllegal[2]=!regex.test(newValue)
})
watch(emailprefixInput,(newValue)=>{
    const regex = /^[a-zA-Z0-9_][a-zA-Z0-9_.-]*$/;
    isInputIllegal[3]=!regex.test(newValue)
})
watch(passwordInput,(newValue)=>{
    const regex = /^(?=.*[a-zA-Z])(?=.*[0-9\-_])(?![._-]$)(?!^[._-])(?![._-]{2,})[a-zA-Z0-9_-]{6,32}$/;
    isInputIllegal[4]=!regex.test(newValue)
})
watch(passwordvalidateInput,(newValue)=>{
    const regex = /^(?=.*[a-zA-Z])(?=.*[0-9\-_])(?![._-]$)(?!^[._-])(?![._-]{2,})[a-zA-Z0-9_-]{6,32}$/;
    isInputIllegal[5] = !regex.test(newValue) || (passwordInput.value !== passwordvalidateInput.value);
})
const MailAppend = [
{
    value: '@qq.com',
    label: '@qq.com',
  },
  {
    value: '@gmail.com',
    label: '@gmail.com',
  },
  {
    value: '@163.com',
    label: '@163.com',
  },
  {
    value: '@126.com',
    label: '@126.com',
  },
  {
    value: '@sina.com',
    label: '@sina.com',
  },
  {
    value: '@139.com',
    label: '@139.com',
  },
  {
    value: '@aliyun.com',
    label: '@aliyun.com',
  },
  {
    value: '@icloud.com',
    label: '@icloud.com',
  }
];
const UserRegisterApply=async ()=>{
    const email=emailprefixInput.value+emailappendSelection.value
    for(let i=0;i<isInputIllegal.length;i++){
        if(isInputIllegal[i]){
            alert('数据不合法!请重新输入')
            return;
        }
    }
    if(emailappendSelection==null){
        alert('请选择邮箱后缀')
        return;
    }
    try{
        const response=await axios.post("/api/user/register",{
            role:userroleInput,
            t_name:usernameInput,
            t_passowrd:passwordInput,
            phonenumber:phonenumberInput,
            idcard:IDcardInput,
            email:email
        })
        if(response.data.success){
            console.log('注册成功')
        }
        else{
            console.log('注册失败')
        }
    }
    catch(error){
        console.error('程序抛出异常')
    }

}
</script>
<style scoped lang="css">
@import "./form.css";
.illegal_input{  
    --el-input-border-color: red;
    --el-input-focus-border-color: red;
    --el-border-color-hover: red;
}
</style>